<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">押金退还申请记录</block>
		</cu-custom>
		<view class="">
			<view class="margin bg-white">
				<view class="text-lg solid-bottom padding">押金退还申请信息</view>
				<view class="flex flex-direction padding">
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-timefill">{{depositBackRequest.ct}}</text>
					</view>
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-rechargefill">{{formatAmount(depositBackRequest.amount / 100)}}</text>
						<text class="cu-tag bg-yellow round text-white"
							v-if="depositBackRequest.statu === 'REQ'">已申请</text>
						<text v-if="depositBackRequest.statu === 'REJ'"
							class="cu-tag bg-red text-white round">已驳回</text>
						<text v-if="depositBackRequest.statu === 'BAC'"
							class="cu-tag bg-green text-white round">已退还</text>
					</view>
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-community">{{depositBackRequest.reason}}</text>
					</view>
				</view>
			</view>
			
			<view v-if="depositBackRequest.statu === 'BAC'" class="margin bg-white">
				<view class="text-lg solid-bottom padding">押金退还记录</view>
				<view class="flex flex-direction padding">
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-timefill">{{depositRecord.ct}}</text>
						<text class="cuIcon-rechargefill text-red">{{formatAmount(depositBackRequest.amount / 100)}}</text>
					</view>
				</view>
			</view>
			<view v-if="depositBackRequest.statu === 'BAC'" class="margin bg-white">
				<view class="text-lg solid-bottom padding">原始交易记录</view>
				<view class="flex flex-direction padding">
					<view class="flex justify-between margin-tb-sm">
						<text class="cuIcon-timefill">{{paymentRecord.ct}}</text>
						<text class="cuIcon-weixin">{{paymentRecord.original_code}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad:function(option){
			this.state = this.common.getState();
			this.init(option.backId);
		},
		onShow:function() {
			this.state = this.common.getState();
		},
		data: function() {
			return {
				state: {},
				depositBackRequest: {
					backId: 0,
				},
				depositRecord: {
				},
				paymentRecord: {
				}
			};
		},
		methods: {
			formatAmount: function(amount) {
				return this.common.parseMoney(amount);
			},
			init: function(backId) {
				let self = this;
				this.http.get({
					url: "/client/deposit-back-request/info",
					param: {
						backId
					}
				}).then(function(res) {
					self.depositBackRequest = res.deposit_back_request;
					
					if (res.deposit_record) {
						self.depositRecord = res.deposit_record;
					}
					
					if (res.payment_record) {
						self.paymentRecord = res.payment_record;
					}
				});
			}
		}
	}
</script>

<style>
</style>
